<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" width="1200px" @open="onOpen" @close="onClose" :title="title">
      <el-descriptions class="margin-top" title="" :column="2" size="mini" border>
        <el-descriptions-item>
          <template slot="label">所属项目</template>{{ this.form.projectName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">所属公司</template>{{ this.form.transportCompanyName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">车型要求</template>
          <dict-tag :options="dict.type.car_type_id" :value="this.form.carTypeClassId" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">预计车次</template>{{ this.form.bookingCarNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">资源利用化企业</template>{{ this.form.disposalLandName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">司机列表</template>{{ this.form.driverNames }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">预约时间</template>
          {{ parseTime(this.form.bookingTime, '{y}-{m}-{d}') }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">完成时间</template>
          {{ parseTime(this.form.completeTime) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">创建时间</template>
          {{ parseTime(this.form.createdDate) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">预约状态</template>
          <dict-tag :options="dict.type.booking_state" :value="this.form.state" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">建筑垃圾种类</template>
          <dict-tag :options="dict.type.rubbish_type" :value="this.form.rubbishType" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">项目进度</template>
          <dict-tag :options="dict.type.rubbish_stage" :value="this.form.rubbishStage" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">处置面积(m²)</template>{{ this.form.disposalArea }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">处置重量(吨)</template>{{ this.form.disposalWeight }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">垃圾预估量(吨)</template>{{ this.form.disposalPlanWeight }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">无机物类(吨)</template>{{ this.form.inorganicWeight }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">金属类(吨)</template>{{ this.form.metalWeight }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">废木材类(吨)</template>{{ this.form.woodWeight }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">其他类(吨)</template>{{ this.form.otherWeight }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">施工单位</template>{{ this.form.constructionDept }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">施工单位项目经理</template>{{ this.form.constructionPerson }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">施工单位联系电话</template>{{ this.form.constructionPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">监理单位</template>{{ this.form.supervisorDept }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">监理单位项目经理</template>{{ this.form.supervisorPerson }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">监理单位联系电话</template>{{ this.form.supervisorPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">监理单位意见</template>{{ this.form.supervisorSuggestion }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">项目图片</template>
          <image-preview-list :src="this.form.images" :width=50 :height=50 />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">盖章图片</template>
          <image-preview-list :src="this.form.sealImages" :width=50 :height=50 />
        </el-descriptions-item>
      </el-descriptions>

      <el-divider>运输单明细</el-divider>
      <el-table :data="this.form.transportList" border style="margin-top:10px">
        <el-table-column label="车牌号" align="center" prop="carNumber" />
        <el-table-column label="车辆类型" align="center" prop="carType" />
        <el-table-column label="司机姓名" align="center" prop="driverName" />
        <el-table-column label="司机电话" align="center" prop="driverPhone" />
        <el-table-column label="车辆载重(吨)" align="center" prop="vehicleLoad" />
        <el-table-column label="状态" align="center" prop="state">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.transport_state" :value="scope.row.state" />
          </template>
        </el-table-column>
        <el-table-column label="开始时间" align="center" prop="beginTime" width="180" />
        <el-table-column label="结束时间" align="center" prop="endTime" width="180" />
      </el-table>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm" v-if="!readonly">审批</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import AFMap from '@/components/Amap/AFMap';

export default {
  name: "ProjectExpandDetail",
  inheritAttrs: false,
  dicts: ['car_type_id', 'booking_state', 'transport_state', 'rubbish_type', 'rubbish_stage'],
  components: { AFMap },
  props: {
    title: {
      type: String,
    },
    formData: {
      type: Object,
      default: () => { },
    },
    readonly: {
      type: Boolean,
    },
  },
  data () {
    return {
      form: {},
      elForm: {},
      rules: {
        status: [
          { required: true, message: "审核结果不能为空", trigger: "blur" }
        ],
        approvalDesc: [
          { required: true, message: "审核意见不能为空", trigger: "blur" }
        ],
      },
    }
  },
  computed: {},
  watch: {
    formData: function () {
      this.form = this.formData;
    },
  },
  created () { },
  mounted () { },
  methods: {
    onOpen () { },
    onClose () {
      this.resetForm("elForm");
    },
    close () {
      this.$emit('update:visible', false)
    },
    handleConfirm () {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return;
        this.$emit("commit", {
          ...this.elForm,
          id: this.form.id
        });
        this.close();
      })
    },
  }
}

</script>
<style></style>
